<template>
	<view>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<u-form :model="model" ref="uForm" style="width: 100%;">
				<u-form-item label-width="130" style="color:red" label="设备名称:"><u-input v-model="model.name" type="text" /></u-form-item>
				<u-form-item label-width="130" label="设备编号:"><u-input v-model="model.code" type="text" placeholder="非必填,可自动生成" /></u-form-item>
				<u-form-item label-width="130" label="设备类别:">
					<u-select v-model="equipShow" :list="type" @confirm="confirm"></u-select>
					<u-tag :text="getTyp(model.type)" @click="equipShow = true" />
				</u-form-item>
				<u-form-item label-width="130" label="设备图片:">
					<u-upload
						width="160"
						height="160"
						@on-uploaded="onUploaded"
						@on-remove="onRemove"
						:action="action"
						:header="header"
						:max-size="1 * 1024 * 1024"
						max-count="6"
					></u-upload>
				</u-form-item>
				<u-form-item label-width="130" label="规格型号:"><u-input v-model="model.model" type="text" /></u-form-item>
				<u-form-item label-width="130" label="详细地址:"><u-input v-model="model.address" type="text" /></u-form-item>
				<u-form-item label-width="130" label="设备厂商:"><u-input v-model="model.manufacturer" type="text" /></u-form-item>
				<u-form-item label-width="130" label="启用日期:">
					<u-calendar v-model="visible" @change="dateChange"></u-calendar>
					<u-tag :text="model.usable" @click="visible = true" mode="plain" />
				</u-form-item>
				<u-form-item label-width="130" label="使用年限:"><u-number-box v-model="model.durable"></u-number-box></u-form-item>
			</u-form>
		</view>
		<u-gap height="20"></u-gap>
		<view class="btn-line">
			<button class="landing" type="primary" style="width: 90%;" @click="bindConfirm">提交</button>
			</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			action: this.$website.url2 + 'files/upload',
			header: {
				Authorization: ''
			},
			equipShow: false,
			visible: false,
			model: {
				durable:20
			},
			type: []
		};
	},
	onLoad(option) {
		this.header.Authorization = 'Bearer ' + this.vuex_token;
		this.request({
			url: 'BaseLabel/pages',
			data: {
				limit: 0
			},
			success: res => {
				this.type = res.data;
			}
		});
	},
	methods: {
		confirm(e) {
			if (e.length > 0) {
				this.model.type = e[0].value;
			}
		},
		onUploaded(lists, name) {
			this.model.urls = [];
			lists.forEach(m => {
				this.model.urls.push(m.response.data.id);
			});
		},
		onRemove(index, lists, name) {
			if (this.model.urls != undefined && this.model.urls.length>0){
				this.model.urls.forEach(m=>{
					if (!lists.some(n=>n.response.data.id == m)){
						this.request({
							url: 'files/delete?id='+m,
							method: 'POST',
							success: res => {
							}
						});
					}
				})
			}
			this.model.urls = [];
			lists.forEach(m => {
				this.model.urls.push(m.response.data.id);
			});
		},
		getTyp(id) {
			let typ = this.type.find(m => m.value == id);
			if (typ != undefined) {
				return typ.label;
			} else {
				return '请选择分类';
			}
		},
		dateChange(e) {
			this.model.usable = e.result;
		},
		bindConfirm() {
			if (this.model.name == undefined || this.model.name == '') {
				this.$u.toast('请输入设备名称');
				return;
			}
			this.model.status =1
			if (this.model.urls!=undefined){
				this.model.files = this.model.urls.join(',')
			}
			this.request({
				url: 'BaseEquipment/add',
				method: 'POST',
				data: this.model,
				success: res => {
					if (res.code == 200) {
						uni.navigateBack();
					} else {
						this.$u.toast(res.msg);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
	.landing{
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
</style>
